<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vip日志</title>
  <link rel="stylesheet" href="../../mobile_static/css/element.css">
  <link rel="stylesheet" href="../../mobile_static/css/base.css">
  <link rel="stylesheet" href="../../mobile_static/css/clientexceptionLog.css">
  <script src="../../mobile_static/js/vue.js"></script>
  <script src="../../mobile_static/js/axios.js"></script>
  <script src="../../mobile_static/js/element.js"></script>
</head>

<body>
  <div id="app">
    <div class="app-content">
      <div class="top-bar">

      </div>


      <!-- 表格 -->
      <div class="table-box">
        <!-- 过滤条件 -->
        <div class="top-bar">
          <!-- <el-tabs v-model="activeName" >
            <el-tab-pane label="用户管理" name="first">
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second"></el-tab-pane>
            <el-tab-pane label="角色管理" name="third"></el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
          </el-tabs> -->
          <ul class="ul2">
            <li @click="scroll_one"><a :class="{'selected':isSelect == 1}" >客户端异常日志</a> </li>
            <li  @click="scroll_two"><a :class="{'selected':isSelect == 2}">登录日志</a></li>
            <li  @click="scroll_three"><a :class="{'selected':isSelect == 3}">工作台日志</a></li>
            <li  @click="scroll_four"><a :class="{'selected':isSelect == 4}">应用异常日志</a></li>
          </ul>
        </div>

        <div class="table-box" v-show="isSelect == 1">
          <!-- 过滤条件 -->
          <div class="table-title">
            <ul>
              <li>
                <el-date-picker value-format="yyyy-MM-dd" v-model="timeValue" @change="dateChange" type="daterange"
                  unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue" placeholder="按用户账号搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue2" placeholder="按用户姓名搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-select v-model="value" placeholder="客户端类型" @change="search">
                  <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-select v-model="value2" placeholder="客户端版本" @change="search">
                  <el-option v-for="item in options2" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-button type="primary" >查询</el-button>
                
              </li>
              <li>
                <el-button >重置</el-button>
              </li>
            </ul>
          </div>
          <!-- 表格主体 -->
          <div class="table-main">
            <el-table :data="tableData" :header-cell-class-name="headerBg" border  stripe style="width: 100%" v-loading="loading">
              <el-table-column label="序号" type="index" width="50" >
              </el-table-column>
              <el-table-column label="用户账号" prop="UserId">
              </el-table-column>
              <el-table-column label="用户姓名" prop="UserName">
              </el-table-column>
              <el-table-column label="部门" prop="DepFullPath">
              </el-table-column>
              <el-table-column label="客户端类型" prop="SoftwareType">
              </el-table-column>
              <el-table-column label="客户端版本" prop="SoftwareVersion">
              </el-table-column>
              <el-table-column label="日期时间" prop="LogOccurrenceTime">
              </el-table-column>
              <el-table-column label="日志详情" prop="operation">
               
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="paging-box">
            <div class="block">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="thisPage" :page-sizes="[10, 20, 50, 100]" :page-size="size"
                layout="total, sizes, prev, pager, next, jumper" :total="length">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="table-box" v-show="isSelect == 2">
          <!-- 过滤条件 -->
          <div class="table-title">
            <ul>
              <li>
                <el-date-picker value-format="yyyy-MM-dd" v-model="timeValue" @change="dateChange" type="daterange"
                  unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue" placeholder="按用户账号搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue2" placeholder="按用户姓名搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-select v-model="value" placeholder="客户端类型" @change="search">
                  <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-select v-model="value2" placeholder="客户端版本" @change="search">
                  <el-option v-for="item in options2" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-select v-model="value2" placeholder="登录状态" @change="search">
                  <el-option v-for="item in options3" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-button type="primary" >查询</el-button>
                
              </li>
              <li>
                <el-button >重置</el-button>
              </li>
            </ul>
          </div>
          <!-- 表格主体 -->
          <div class="table-main">
            <el-table :data="tableData2" border  :header-cell-class-name="headerBg"  stripe style="width: 100%" v-loading="loading">
              <el-table-column label="序号"type="index" width="50">
              </el-table-column>
              <el-table-column label="用户账号" prop="UserId">
              </el-table-column>
              <el-table-column label="用户姓名" prop="UserName">
              </el-table-column>
              <el-table-column label="部门" prop="DepFullPath">
              </el-table-column>
              <el-table-column label="客户端类型" prop="SoftwareType">
              </el-table-column>
              <el-table-column label="客户端版本" prop="SoftwareVersion">
              </el-table-column>
              <el-table-column label="日期时间" prop="LogOccurrenceTime">
              </el-table-column>
              <el-table-column label="日志详情" prop="operation">
               
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="paging-box">
            <div class="block">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="thisPage" :page-sizes="[10, 20, 50, 100]" :page-size="size"
                layout="total, sizes, prev, pager, next, jumper" :total="length">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="table-box" v-show="isSelect == 3">
          <!-- 过滤条件 -->
          <div class="table-title">
            <ul>
              <li>
                <el-date-picker value-format="yyyy-MM-dd" v-model="timeValue" @change="dateChange" type="daterange"
                  unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue" placeholder="按用户账号搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue2" placeholder="按用户姓名搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-select v-model="value" placeholder="客户端类型" @change="search">
                  <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-select v-model="value2" placeholder="客户端版本" @change="search">
                  <el-option v-for="item in options2" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-select v-model="value2" placeholder="日志状态" @change="search">
                  <el-option v-for="item in options3" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-button type="primary" >查询</el-button>
                
              </li>
              <li>
                <el-button >重置</el-button>
              </li>
            </ul>
          </div>
          <!-- 表格主体 -->
          <div class="table-main">
            <el-table :data="tableData3" border   :header-cell-class-name="headerBg"  stripe style="width: 100%" v-loading="loading">
              <el-table-column label="序号" type="index" width="50">
              </el-table-column>
              <el-table-column label="用户账号" prop="UserId">
              </el-table-column>
              <el-table-column label="用户姓名" prop="UserName">
              </el-table-column>
              <el-table-column label="部门" prop="DepFullPath">
              </el-table-column>
              <el-table-column label="业务场景" prop="BusinessScenc">
              </el-table-column>
              <el-table-column label="客户端类型" prop="SoftwareType">
              </el-table-column>
              <el-table-column label="客户端版本" prop="SoftwareVersion">
              </el-table-column>
              <el-table-column label="日期时间" prop="LogOccurrenceTime">
              </el-table-column>
              <el-table-column label="日志详情" prop="operation">
               
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="paging-box">
            <div class="block">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="thisPage" :page-sizes="[10, 20, 50, 100]" :page-size="size"
                layout="total, sizes, prev, pager, next, jumper" :total="length">
              </el-pagination>
            </div>
          </div>
        </div>
        <div class="table-box" v-show="isSelect == 4">
          <!-- 过滤条件 -->
          <div class="table-title">
            <ul>
              <li>
                <el-date-picker value-format="yyyy-MM-dd" v-model="timeValue" @change="dateChange" type="daterange"
                  unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue" placeholder="按用户账号搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValue2" placeholder="按用户姓名搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-select v-model="value" placeholder="客户端类型" @change="search">
                  <el-option v-for="item in options" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-select v-model="value2" placeholder="客户端版本" @change="search">
                  <el-option v-for="item in options2" :key="item.type" :label="item.name" :value="item.type">
                  </el-option>
                </el-select>
              </li>
              <li>
                <el-input prefix-icon="el-icon-search" v-model="searchValues" placeholder="按应用名搜索" @change="search">
                </el-input>
              </li>
              <li>
                <el-button type="primary" >查询</el-button>
                
              </li>
              <li>
                <el-button >重置</el-button>
              </li>
            </ul>
          </div>
          <!-- 表格主体 -->
          <div class="table-main">
            <el-table :data="tableData4" border  :header-cell-class-name="headerBg" stripe style="width: 100%" v-loading="loading">
              <el-table-column label="序号" type="index" width="50" >
              </el-table-column>
              <el-table-column label="用户账号" prop="UserId">
              </el-table-column>
              <el-table-column label="用户姓名" prop="UserName">
              </el-table-column>
              <el-table-column label="部门" prop="DepFullPath">
              </el-table-column>
              <el-table-column label="客户端类型" prop="SoftwareType">
              </el-table-column>
              <el-table-column label="客户端版本" prop="SoftwareVersion">
              </el-table-column>
              <el-table-column label="应用名称" prop="ModuleName">
              </el-table-column>
              <el-table-column label="身份认证类型" prop="AttestationType">
              </el-table-column>
              <el-table-column label="日期时间" prop="LogOccurrenceTime">
              </el-table-column>
              <el-table-column label="日志详情" prop="operation" >
                
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="paging-box">
            <div class="block">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="thisPage" :page-sizes="[10, 20, 50, 100]" :page-size="size"
                layout="total, sizes, prev, pager, next, jumper" :total="length">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script type="module">

  new Vue({
    el: "#app",
    data() {
      return {
        activeName: 'first',
        loading: false,
        timeValue: "",//日期value值
        startDate: "",
        endDate: "",
        options: [
          {type:"4",name:'iPhone'},
          {type:"3",name:'iPad'},
          {type:"2",name:'Android'},
          {type:"1",name:'AndroidPad'},
        ],
        options2: [
          {type:"3",name:'1.4.7'},
          {type:"2",name:'1.4.8'},
          {type:"1",name:'1.4.9'},
        ],
        options3: [
          {type:"1",name:'成功'},
          {type:"2",name:'失败'},
        
        ],
        isSelect: 1,//最上面选择栏选择值
        value: '',//选择器value值
        value2: '',//选择器value值
        value3: '',//选择器value值
        searchValue: "",
        searchValues: "",
        searchValue2: "",
        tableData: [{  UserId:"2",
            UserName:"3",
            DepFullPath:"4",
            SoftwareType:"5",
            SoftwareVersion:"6",
            LogOccurrenceTime:"7"}],
        tableData2: [{  UserId:"2",
            UserName:"3",
            DepFullPath:"4",
            SoftwareType:"5",
            SoftwareVersion:"6",
            LogOccurrenceTime:"7"}],
        tableData3: [{  UserId:"2",
            UserName:"3",
            DepFullPath:"4",
            SoftwareType:"5",
            SoftwareVersion:"6",
            LogOccurrenceTime:"7"}],
        tableData4: [{  UserId:"2",
            UserName:"3",
            DepFullPath:"4",
            SoftwareType:"5",
            SoftwareVersion:"6",
            LogOccurrenceTime:"7"}],
        size: 10,
        thisPage: 1,
        length: 500,
      }
    },
    created() {
      for (let i = 0; i < this.tableData4.length; i++) {
              this.$set(this.tableData4[i], "operation", "查看详情")
            }
            if (this.tableData4.length) {
              let tableBtnArr = document.getElementsByClassName("el-table_4_column_35");
              setTimeout(() => {
                for (let i = 1; i < tableBtnArr.length; i++) {
                  tableBtnArr[i].addEventListener("click", () => {
                    window.location.href = './applicationException/applicationLogDetails.html';
                  })
                }
              })
            }
      for (let i = 0; i < this.tableData3.length; i++) {
              this.$set(this.tableData3[i], "operation", "查看详情")
            }
            if (this.tableData3.length) {
              let tableBtnArr = document.getElementsByClassName("el-table_3_column_25");
              setTimeout(() => {
                for (let i = 1; i < tableBtnArr.length; i++) {
                  tableBtnArr[i].addEventListener("click", () => {
                    window.location.href = './logInException/loginLogDetails.html';
                  })
                }
              })
            }
      for (let i = 0; i < this.tableData2.length; i++) {
              this.$set(this.tableData2[i], "operation", "查看详情")
            }
            if (this.tableData2.length) {
              let tableBtnArr = document.getElementsByClassName("el-table_2_column_16");
              setTimeout(() => {
                for (let i = 1; i < tableBtnArr.length; i++) {
                  tableBtnArr[i].addEventListener("click", () => {
                    window.location.href = './logInException/loginLogDetails.html';
                  })
                }
              })
            }
      for (let i = 0; i < this.tableData.length; i++) {
              this.$set(this.tableData[i], "operation", "查看详情")
            }
            if (this.tableData.length) {
              let tableBtnArr = document.getElementsByClassName("el-table_1_column_8");
              setTimeout(() => {
                for (let i = 1; i < tableBtnArr.length; i++) {
                  tableBtnArr[i].addEventListener("click", () => {
                    window.location.href = './clientexception/vipClientLogDetails.html';
                  })
                }
              })
            }
    },
    mounted() {

    },
    watch: {

    },
    methods: {
      headerBg() {
      return 'headerBg'
    },

      scroll_one() {
        this.isSelect = 1
        sessionStorage.setItem('isSelect', this.isSelect)
        // document.documentElement.scrollTop = 0
      },
      scroll_two() {
        this.isSelect = 2
        sessionStorage.setItem('isSelect', this.isSelect)
        // document.documentElement.scrollTop = 1566
      },
      scroll_three() {
        this.isSelect = 3
        sessionStorage.setItem('isSelect', this.isSelect)
        // document.documentElement.scrollTop = 0
      },
      scroll_four() {
        this.isSelect = 4
        sessionStorage.setItem('isSelect', this.isSelect)
        // document.documentElement.scrollTop = 1566
      },
      search() {
        this.thisPage = 1
        this.RequestedVisitsPV()
      },
      backHome() {
        window.history.back()
      },
      //页面最大数据尺寸改变调用
      handleSizeChange(val) {
        this.size = val
        this.RequestedVisitsPV()
      },
      //页数改变调用
      handleCurrentChange(val) {
        this.thisPage = val
        this.RequestedVisitsPV()
      },
      //日期选择框
      dateChange() {

      },
      // 请求访问量PV
      RequestedVisitsPV() {

      },
      //下载
      download() {

      },
      //补零函数
      ZeroComplement(num) {
        if (num < 10) {
          return "0" + num;
        } else {
          return num;
        }
      }
    }
  })
</script>
<style>
  
  .headerBg{
     background: linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%);
   }
  .el-tabs__nav-scroll {
    margin-left: 594px;
    font-size: 12px;
    color: #3E3F42;
    /* background-color: #FAFAFA; */
  }

  .ul2 {
    padding: 9px 18px;
    height: 26px;
    flex: 1;
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 10px;
  }

  .ul2 li {
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(215, 215, 215, 1);
    height: 36px;
    line-height: 36px;
    cursor: pointer;
    flex: 1;
  }
  .ul2 li:hover{
    color: #FFFFFF;
    background-color: rgba(45, 161, 247, 1);
  }
  a:hover{
    text-decoration: none;
    color: #FFFFFF;
  }
  .el-table_2_column_16 {
     cursor: pointer;
     color: #4583D6;
   }
  .el-table_4_column_35 {
     cursor: pointer;
     color: #4583D6;
   }
  .el-table_3_column_25 {
     cursor: pointer;
     color: #4583D6;
   }
  .el-table_1_column_8 {
     cursor: pointer;
     color: #4583D6;
   }
</style>